<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div class="app">
        <form @submit.prevent="postData">
            <div>
                <label for="">用户名：</label>
                <input type="text" v-model="formData.username">
            </div>
           <div>
                <label for="">密码：</label>
                <input type="password" v-model="formData.password">
           </div>
            
            <!-- 下拉菜单 -->
            <div>
                <label for="">爱好：</label>
                <select v-model="formData.hobby">
                    <option value="basketball">篮球</option>
                    <option value="football">足球</option>
                </select> 
            </div>
           <!-- 单选框 -->
           <div>
               <label for="">性别</label>
               <label for="">男</label>
               <input type="radio" value="men" v-model="formData.sex">
               <label for="">女</label>
               <input type="radio" value="women" v-model="formData.sex">
           </div>
           <!-- 复选框 -->
           <div>
               <label for="">技能</label>
               <label for="">前端</label>
               <input type="checkbox" value="前端" v-model="formData.skill">
               <label for="">java</label>
               <input type="checkbox" value="java" v-model="formData.skill">
           </div>
            <button>提交数据</button>
        </form>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <script>
        new Vue({
            el:".app",
            data:{
                formData:{
                    username:"",
                    password:"",
                    hobby:"",
                    sex:"",
                    skill:[]
                }
            },
            methods:{
                postData(){
                    console.log(this.formData)
                }
            }
        })
    </script>
</body>
</html>